<template>
	<div class="app-container">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-form ref="queryForm" :model="queryParams" :inline="true" label-width="110px">
					<el-form-item label="订单编号：">
						<el-input v-model.trim="queryParams.orderSn" placeholder="请输入订单编号" clearable />
					</el-form-item>
					<el-form-item label="用户ID：">
						<el-input v-model.trim="queryParams.uuid" placeholder="请输入用户ID" maxlength="6" clearable />
					</el-form-item>
					<el-form-item label="手机号码：">
						<el-input v-model.trim="queryParams.mobile" placeholder="请输入手机号码" maxlength="11" clearable />
					</el-form-item>

					<start-end-time ref="child" title="时间：" :get-time="getTime"></start-end-time>

					<br />
					<el-form-item label="财务类型：">
						<el-select v-model.trim="queryParams.financeType" filterable clearable placeholder="请选择财务类型">
							<el-option v-for="(value, index) in financeTypeList" :key="index" :label="value.name" :value="value.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="订单类型：">
						<el-select v-model.trim="queryParams.orderType" filterable clearable placeholder="请选择订单类型">
							<el-option v-for="(value, index) in orderTypeList" :key="index" :label="value.name" :value="value.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="收支类型：">
						<el-select v-model.trim="queryParams.type" filterable clearable placeholder="请选择收支类型">
							<el-option v-for="(value, index) in typeList" :key="index" :label="value.name" :value="value.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="支付方式：">
						<el-select v-model.trim="queryParams.pay_type" filterable clearable placeholder="请选择支付方式">
							<el-option v-for="(value, index) in payTypeList" :key="index" :label="value.name" :value="value.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="交易状态：">
						<el-select v-model.trim="queryParams.order_status" filterable clearable placeholder="请选择交易状态">
							<el-option v-for="(value, index) in payStatusList" :key="index" :label="value.name" :value="value.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="queryList">搜索 </el-button>
						<el-button icon="el-icon-refresh" @click="resetQuery">重置 </el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
			<el-table v-loading="loading" stripe :data="goodsList" class="table">
				<el-table-column :formatter="emptyToString" type="index" label="序号" prop="id" align="center"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="订单编号" prop="order_sn"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="uuid"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="手机号码" prop="mobile" min-width="110"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="财务类型" prop="finance_type">
					<template slot-scope="scope">
						{{
							scope.row.finance_type == 100
								? '订单'
								: scope.row.finance_type == 102
								? '充值'
								: scope.row.finance_type == 103
								? '提现'
								: scope.row.finance_type == 104
								? '退款'
								: scope.row.finance_type == 105
								? '佣金'
								: '会员'
						}}
					</template>
				</el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="订单类型" prop="order_type">
					<template slot-scope="scope">
						{{
							scope.row.order_type == 1
								? '商城订单'
								: scope.row.order_type == 2
								? '积分订单'
								: scope.row.order_type == 3
								? '秒杀'
								: scope.row.order_type == 4
								? '未知'
								: scope.row.order_type == 5
								? '砍价'
								: scope.row.order_type == 6
								? '拼团'
								: scope.row.order_type == 7
								? '充值'
								: scope.row.order_type == 8
								? '提现'
								: '账户充值'
						}}
					</template>
				</el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="收支类型" prop="type">
					<template slot-scope="scope">
						{{ scope.row.type == 1 ? '收入' : '支出' }}
					</template>
				</el-table-column>
				<el-table-column
					:formatter="emptyToString"
					align="center"
					label="支付方式"
					prop="
"
				>
					<template slot-scope="scope">
						{{ scope.row.pay_type == 1 ? '微信支付' : scope.row.pay_type == 2 ? '支付宝支付' : scope.row.pay_type == 3 ? '余额支付' : scope.row.pay_type == 4 ? '银行卡支付' : '未支付' }}
					</template>
				</el-table-column>
				<el-table-column :formatter="emptyToNumber" align="center" label="金额（元）" prop="amount" min-width="100" />
				<el-table-column :formatter="emptyToNumber" align="center" label="佣金金额（元）" prop="commission" min-width="120" />
				<el-table-column :formatter="emptyToString" align="center" label="交易状态" prop="order_status">
					<template slot-scope="scope">
						{{ scope.row.order_status == 102 ? '待支付' : scope.row.order_status == 103 ? '待发货' : scope.row.order_status == 106 ? '待收货' : '完成' }}
					</template>
				</el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="备注" prop="conent" min-width="100" />
				<el-table-column align="center" label="时间" prop="create_time" min-width="156" :formatter="formatDate" />
			</el-table>
			<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		</el-card>
	</div>
</template>
<script>
import { getFinanceList, getOrderdital, getFinanceExport } from '@/api/mall/bargain';
import startEndTime from '../../../components/StartEndTime';
export default {
	name: 'Index',
	components: { startEndTime },
	data() {
		return {
			typeList: [
				{ name: '全部', id: undefined },
				{ name: '收入', id: 1 },
				{ name: '支出', id: 2 },
			],
			payStatusList: [
				{ name: '全部', id: undefined },
				{ name: '待支付', id: 102 },
				{ name: '待发货', id: 103 },
				{ name: '待收货', id: 106 },
				{ name: '已完成', id: 107 },
			],
			payTypeList: [
				{ name: '全部', id: undefined },
				{ name: '微信支付', id: 1 },
				{ name: '支付宝支付', id: 2 },
				{ name: '余额支付', id: 3 },
				{ name: '银行卡支付', id: 4 },
			],
			financeTypeList: [
				{ name: '全部', id: undefined },
				{ name: '订单', id: 100 },
				{ name: '充值', id: 101 },
				{ name: '提现', id: 102 },
				{ name: '退款', id: 103 },
			],
			orderTypeList: [
				{ name: '全部', id: undefined },
				{ name: '商城订单', id: 1 },
				{ name: '积分订单 ', id: 2 },
				{ name: '秒杀', id: 3 },
				{ name: '未知', id: 4 },
				{ name: '砍价', id: 5 },
				{ name: '拼团', id: 6 },
				{ name: '充值', id: 7 },
				{ name: '提现', id: 8 },
				{ name: '账户充值', id: 9 },
			],
			loading: true,
			total: 0,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				mobile: null,
				uuid: null,
				type: null,
				beginTime: null,
				endTime: null,
				categoryId: null,
				date: [],
				orderType: null,
				financeType: null,
				pay_type: null,
				order_status: null,
			},
			goodsList: [],
		};
		datetimerange;
	},
	created() {
		this.getList();
	},
	methods: {
		formatDate(row, column) {
			let cellValue = row[column.property];
			if (cellValue == null || cellValue == '') return '';
			var date = new Date(cellValue);
			var year = date.getFullYear();
			var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
		},
		resetQuery() {
			this.$refs.child.resetTime();
			this.queryParams = {
				pageNum: 1,
				pageSize: 10,
				mobile: null,
				uuid: null,
				type: null,
				beginTime: null,
				endTime: null,
				categoryId: null,
				date: [],
				orderType: null,
				financeType: null,
				pay_type: null,
				order_status: null,
			};
			this.queryList();
		},
		//获取时间
		getTime(startTime, endTime) {
			this.$set(this.queryParams.date, 0, startTime);
			this.$set(this.queryParams.date, 1, endTime);
		},
		queryList() {
			this.queryParams.pageNum = 1;
			if (this.queryParams.date && this.queryParams.date.length > 0) {
				this.queryParams.beginTime = this.queryParams.date[0];
				this.queryParams.endTime = this.queryParams.date[1];
			}
			this.getList();
			this.queryParams.beginTime = null;
			this.queryParams.endTime = null;
		},
		getList() {
			console.log(this.queryParams);
			let obj = JSON.parse(JSON.stringify(this.queryParams));
			console.log(obj);
			delete obj.date;
			getFinanceList(obj).then((response) => {
				this.goodsList = response.data.records;
				console.log(this.goodsList);
				this.total = response.data.total;
				this.loading = false;
			});
		},
		handleUpdate(row) {
			getOrderdital(row).then((response) => {
				this.goodsList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出数据?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return getFinanceExport(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
<style scoped lang="scss">
.btn-box {
	display: flex;
	justify-content: center;
	.btn2 {
		background: #1a2483;
		opacity: 1;
		border: none;
	}
	.btn {
		width: 236px !important;
		line-height: 60px;
		height: 60px;
		padding: 0;
		text-align: center;
	}
}
.edit-form {
	.goods-info {
		display: flex;
		border-radius: 8px;
		border: 1px dashed transparent;
		background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.25em, white 0, white 0.75em);
		width: 100%;
		height: 127px;
		box-sizing: border-box;
		padding: 14px 18px;
		.right {
			padding-left: 30px;
			font-size: 16px;
			overflow: hidden;
			flex: 1;
			.goods-name {
				color: #333333;
			}
			.goods-id {
				color: #808a97;
				margin-top: 15px;
			}
			.goods-price {
				color: #f14a46;
				font-weight: 900;
				margin-top: 15px;
				span {
					font-size: 10px;
				}
			}
		}
		img {
			display: block;
			width: 100px;
			height: 100px;
			border-radius: 8px;
		}
	}
	.title {
		text-align: left;
		vertical-align: middle;
		font-size: 14px;
		color: #606266;
		line-height: 40px;
		font-weight: bold;
	}
}
.bottom-btn-box {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 20px;
	> div {
		position: absolute;
		font-size: 14px;
		height: 60px;
		line-height: 60px;
		left: 80px;
		span {
			color: #f14a46;
		}
	}
	.btn {
		width: 236px;
		height: 60px;
		padding: 0;
		font-size: 18px;
	}
	.btn2 {
		background: #1a2483;
		border: none;
	}
}
.commit-btn {
	width: 494px;
	height: 60px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	border-radius: 4px;
	text-align: center;
	margin: 0px auto;
	border: 1px;
	color: #ffffff;
	font-size: 18px;
}
.pl-edit-btn {
	width: 75px;
	height: 35px;
	background: #6373ee;
	opacity: 1;
	font-size: 12px;
	padding: 10px 12px;
	text-align: center;
	border: none;
	margin-left: 10px;
	&:hover {
		background: #6373ee;
		opacity: 1;
	}
}
.select-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	border: none;
	&:hover {
		background: #1a2483;
		opacity: 1;
	}
}
.search-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	color: #fff;
	border: none;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	font-size: 12px;
	display: inline-block;
	cursor: pointer;
}
.add-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	color: #fff;
	border: none;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	font-size: 12px;
	cursor: pointer;
}
.table {
	margin-top: 10px;
	border: 1px solid #f7f7f7;
	opacity: 1;
	border-radius: 10px;
	.btn {
		height: 36px;
		border: none;
		border-radius: 4px;
		color: #ffffff;
	}
	.btn1 {
		background: #6373ee;
	}
	.btn2 {
		background: #1d2eb8;
	}
	.btn3 {
		background: #1a2483;
	}
}
</style>
